<template>
	<view class="tel-consult">
		<view class="tel-adver">
              <view class="tel-t">
				  <view>放心问</view>
				  <view>专业安全</view>
			  </view>
			  <view class="tel-b">
				  <view><image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-icon-1.png"></image>专家实时在线</view>
				  <view><image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-icon-2.png"></image>闪电回复</view>
				  <view><image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-icon-3.png"></image>30分钟内解决问题</view>
			  </view>
		</view>
		<view class="tel">
			<view class="">
				<image class="expert-item-pic" :src="headPortrait" mode=""></image>
			</view>
			<view class="tel-warp">
				<view class="tel-num">{{realName}}【电话咨询】</view>
			</view>
		</view>
		<view class="ord-line">
			
		</view>
		<view class="order">
			<view class="order-warp">
				<view style="color: #444444;">
					预约时间
				</view>
				<view @click="togglePopup">
					<view class="order-b" v-if="timeShow">{{week?`周${week}`:''}}{{week&&time?',':''}}&nbsp;&nbsp;{{time}}</view>
					<view class="order-b" v-else>请选择预约时间</view>
					
				</view>
				<view>
					<uni-icons size="14W" color="#C5C4C4" type="arrowright"></uni-icons>
				</view>
			</view>
		</view>
		<view class="consult-tel">
			<view class="consult-tel-warp">
				<view style="color: #444444;">接听电话</view>
				<view>
					<input style="text-align: end;" v-model="telNumber" type="text"/>
				</view>
			</view>
			
		</view>
		<view class="appoint-time-title" style="color: #444444;">
			服务类型
		</view>
		<view class="tel-serve-con">
			<view @click="chooseServe(1, picTxtItems[1].price, picTxtItems[1].typeId)" :class="currentIndexServe===1?'tel-serve-con-item active':'tel-serve-con-item'">
				<span class="price-icon">¥</span>
				<span class="price-num">{{picTxtItems[1].price}}</span>
				<span class="price-minus">/次（10分钟）</span>
				&nbsp;&nbsp;
				<view v-if="currentIndexServe === 1" class="tel-select-pic">
					<image class="tel-select-con-pic" src="https://www.innovationgloble.com/wxs/img/wx/tel-icon-1.png" mode=""></image>
				</view>
			</view>
			<view @click="chooseServe(2, picTxtItems[2].price, picTxtItems[2].typeId)" :class="currentIndexServe===2?'tel-serve-con-item active':'tel-serve-con-item'">
				<span class="price-icon">¥</span>
				<span class="price-num">{{picTxtItems[2].price}}</span>
				&nbsp;&nbsp;
				<span class="price-minus">/次（30分钟）</span>
				<view v-if="currentIndexServe === 2" class="tel-select-pic">
					<image class="tel-select-con-pic" src="https://www.innovationgloble.com/wxs/img/wx/tel-icon-1.png" mode=""></image>
				</view>
			</view>
			<view @click="chooseServe(3, picTxtItems[3].price, picTxtItems[3].typeId)" :class="currentIndexServe===3?'tel-serve-con-item active':'tel-serve-con-item'">
				<span class="price-icon">¥</span>
				<span class="price-num">{{picTxtItems[3].price}}</span>
				&nbsp;&nbsp;
				<span class="price-minus">/次（60分钟）</span>
				<view v-if="currentIndexServe === 3" class="tel-select-pic">
					<image class="tel-select-con-pic" src="https://www.innovationgloble.com/wxs/img/wx/tel-icon-1.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="act-warp">
			<view class="act-item">支付方式</view>
		</view>
		<view class="ord-pay-type">
			<view class="ord-pay-type-left">
				<image style="width: 44upx;height: 38upx;vertical-align: middle;margin-right: 16upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/weixin.png"
				 mode=""></image>
				<text class="ord-wechat-font">微信支付</text>
			</view>
			<view class="ord-pay-type-right">
				<image  src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/ord-choose.png" mode=""></image>
			</view>
		</view>
		<view class="ord-line">
			
		</view>
		<view class="tel-tips">
			<view class="tel-tips-title ">
				<image class="warpTips"  src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/expert-light.png"></image>
				<span class="tips">温馨提示</span>
			</view>
			<view class="tel-tips-title1 tel-tips-font">
				1. 服务流程：预约成功后，专家会在预约时间给您来电，号码为010-8888999，请注意接听。
			</view>
			<view class="tel-tips-title1 tel-tips-font">
				2. 届时请确保您的电话为可接听状态。
			</view>
			<view class="tel-tips-title1 tel-tips-font">
				3. 如通话失败，本次咨询不收取费用。如通话中断，可在规定时间内继续拨打，中断时间不计入时长。
			</view>
		</view>
		<view class="order-pay-bottom" @click="confirm">
			<view class="order-pay-bottom-btn">
				去支付
			</view>
		</view>
		<!-- <view class="ord-pay-bot">
			<view class="ord-pay-bot-left">
				<view  class="ord-pay-bot-left-pay">
					<text style="font-size: 30upx;">¥</text>
					&nbsp;&nbsp;<text style="font-size: 52upx;">{{price}}</text>
				</view>
			</view>
			<view class="ord-pay-bot-opt" @click="confirm">
				去支付
			</view>
		</view> -->
		<uni-popup ref="showpopup" type="bottom" >
			
			<view class="time-pop">
				<view >
					<image @click="closePop" class="delete"  src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/public/close.png"></image>
				</view>
				<view class="time-pop-title">选择预约时间</view>
				<view class="time-pop-title-s">仅可预约未来7天&nbsp;&nbsp;专家会在您的预约时间联系您</view>
				<view class="appoint-month">
					<view class="appoint-border"></view>
					<view class="appoint-month-text">{{currentMonth+'月'}}</view>
					<view class="appoint-border"></view>
				</view>
				<view class="appoint-month-contain">
					<block v-for="(item,index) in monthArray" :key="index">
					<view  @click="setAppointDate(index)" class="appoint-month-contain-item">
						<view class="appoint-month-contain-item-week">
							{{item.week}}
						</view>
						<view :style="{color:index==0&&currentIndex!==index?'#2A7DFA':''}" class="appoint-month-contain-item-date" :class="currentIndex===index?'appoint-active':''">
							{{item.date}}
						</view>
					</view>
					</block>
				</view>
				<view class="day-time-list">
					<block v-for="(item,index) in dayData"  :key="index" >
						<view class="day-time-item" :class="selectTimeIndex===index?'active':''"  v-if="dayDataEnbale[index]" @click="selectTime(index)">
							<span :class="!dayDataEnbale[index]?'nochange':''">{{item}}</span>
							<image v-show="selectTimeIndex===index" class="tel-select-con-pic" src="https://www.innovationgloble.com/wxs/img/wx/tel-icon-1.png"></image>
						</view>
					</block>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				realName:'',
				dayData:['09:00 - 12:00','12:00 - 17:00','17:00 - 19:00'],
				dayDataEnbale:[false,false,false],
				currentIndexServe: 1,
				telReg:/^1[34578]\d{9}$/,
				expertId:'',
				telNumber: '',
				month: '',
				date: '',
				week: '',
				time: '09:00 - 12:00',
				picTxtItems: null ,// 电话咨询价格请求回显
				price: 0, // 当前价格
				typeId: 3, // 当前服务类型
				currentMonth:'',
				minCurrentMonth:'',
				currentWeek:'',
				currentDate:'',
				currentIndex:null,
				expertId:'',
				monthArray:[
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''}
				],
				morningTime:[
					"8:00","9:00","10:00","11:00"
				],
				afterTime:[
					"13:00","14:00","15:00","16:00","17:00"
				],
				selectTimeIndex:0,
				headPortrait:'',
				timeShow:false //不显示默认时间
			}
		},
		onBackPress(options) {  
					uni.switchTab({
						url:'pages/mine/mine'
					}) 
					return false
		},  
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			selectTime(index){
				if(this.currentIndex===null){
					uni.showToast({
						title:'请先选择日期',
						icon:'none'
					})
					return
				}
				if(this.dayDataEnbale[index]){
					this.selectTimeIndex = index;
					this.time = this.dayData[index];
					this.$refs.showpopup.close()
				}
			},
			//判断当前月有几天
			getTotalDate(month){
				if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
					return 31
				}else{
					return 30
				}
			},
			setAppointDate(index){
				console.log('index',index)
				this.currentIndex = index;
				this.date = this.monthArray[index].date;
				this.week = this.monthArray[index].week;
			},
			//数字转换
			
			Arabia_To_SimplifiedChinese(Num) {
			    for (var i = Num.length - 1; i >= 0; i--) {
			        Num = Num.replace(",", "")//替换Num中的“,”
			        Num = Num.replace(" ", "")//替换Num中的空格
			    }    
			    if (isNaN(Num)) { //验证输入的字符是否为数字
			        //alert("请检查小写金额是否正确");
			        return;
			    }
			    //字符处理完毕后开始转换，采用前后两部分分别转换
			    var part = String(Num).split(".");
			    var newchar = "";
			    //小数点前进行转化
			    for (var i = part[0].length - 1; i >= 0; i--) {
			        if (part[0].length > 10) {
			            //alert("位数过大，无法计算");
			            return "";
			        }//若数量超过拾亿单位，提示
			        var tmpnewchar = ""
			        var perchar = part[0].charAt(i);
			        switch (perchar) {
			            case "0":  tmpnewchar = "零" + tmpnewchar;break;
			            case "1": tmpnewchar = "一" + tmpnewchar; break;
			            case "2": tmpnewchar = "二" + tmpnewchar; break;
			            case "3": tmpnewchar = "三" + tmpnewchar; break;
			            case "4": tmpnewchar = "四" + tmpnewchar; break;
			            case "5": tmpnewchar = "五" + tmpnewchar; break;
			            case "6": tmpnewchar = "六" + tmpnewchar; break;
			            case "7": tmpnewchar = "七" + tmpnewchar; break;
			            case "8": tmpnewchar = "八" + tmpnewchar; break;
			            case "9": tmpnewchar = "九" + tmpnewchar; break;
			        }
			        switch (part[0].length - i - 1) {
			            case 0: tmpnewchar = tmpnewchar; break;
			            case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
			            case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
			            case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
			            case 4: tmpnewchar = tmpnewchar + "万"; break;
			            case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
			            case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
			            case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
			            case 8: tmpnewchar = tmpnewchar + "亿"; break;
			            case 9: tmpnewchar = tmpnewchar + "十"; break;
			        }
			        newchar = tmpnewchar + newchar;
			    }   
			    //替换所有无用汉字，直到没有此类无用的数字为止
			    while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
			        newchar = newchar.replace("零亿", "亿");
			        newchar = newchar.replace("亿万", "亿");
			        newchar = newchar.replace("零万", "万");
			        newchar = newchar.replace("零零", "零");      
			    }
			    //替换以“一十”开头的，为“十”
			    if (newchar.indexOf("一十") == 0) {
			        newchar = newchar.substr(1);
			    }
			    //替换以“零”结尾的，为“”
			    if (newchar.lastIndexOf("零") == newchar.length - 1) {
			        newchar = newchar.substr(0, newchar.length - 1);
			    }
			    return newchar;
				},
				toTelConsult(time){
					if(this.currentIndex===null){
						uni.showToast({
						    title: '请选择日期',
						    duration: 1000,
							icon:'none'
						});
						return
					}
					let week = this.monthArray[this.currentIndex].week;
					let date = this.monthArray[this.currentIndex].date;
					uni.navigateTo({
						url:`/pagesA/tel-consult/tel-consult?linkUserId=${this.linkUserId}&month=${this.minCurrentMonth}&date=${date}&week=${week}&time=${time}&expertId=${this.expertId}`
					})
			},
			//底部弹出
			togglePopup(type, open) {
				this.timeShow = true
				this.$nextTick(() => {
					this.$refs.showpopup.open()
				})
			},
			closePop() {
				this.$nextTick(() => {
					this.$refs.showpopup.close()
				})
			},
			reAppointment() {
				uni.navigateBack()
			},
			chooseServe(index, price, typeId) {
				this.currentIndexServe = index;
				this.price = price;
				this.typeId = typeId;
				
			},
			confirm(){
				if(!permissionJudge('pay:order:save')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				const _self = this;
				console.log(this.date,this.time)
				if(!this.timeShow){
					uni.showToast({
						icon:'none',
						title:"请选择预约时间"
					})
					return
				}
				if(!this.telReg.test(this.telNumber)){
					uni.showToast({
						icon:'none',
						title:"请输入正确的手机号"
					})
					return
				}
				if(this.telReg.test(this.telNumber)&&this.currentIndex>0){
					const year = (new Date()).getFullYear();
					const month = this.month < 10 ? '0' + this.month : this.month;
					this.$request.post({
						url: 'mallInfo/editExpert',
						data: [
								{
									price: this.price,
									typeId: this.typeId,
									mainId: this.linkUserId,
								}
							],
					}).then(res => {
						const expertProductItem = res[0];
						const { mallId, typeId } = expertProductItem;
						this.$request.post({
							url: 'expertOrder/add',
							data: {
								mallId,
								specs: typeId,
								orderDate: year +'-'+ month+'-'+ this.date + '\xa0'+this.time,
								phone: this.telNumber,
								note: '',
							},
						}).then(res => {
							// uni.showToast({
							// 	title:res,
							// 	icon:'none'
							// })
							//预约 主键
							this.subscribeId = res;
							const openId = uni.getStorageSync('openid');
							
							this.$request.post({
								url: 'payOrder/addOrder',
								data: { 
									mallNum: 1, 
									payType: '21', 
									mallId,
									specsId: typeId,
									remarks:2,
									openId
								}
							}).then(res => {
								// 更新订单
								_self.updateOrder(res);
								_self.pay(res);
							})
						})
					})
				}
			},
			//更新订单
			updateOrder(res){
				const params = {
					id: this.subscribeId,
					orderCode: res.orderCode,
					orderId: res.orderId
				}
				console.log('params', params);
				console.log('res', res);
				this.$request.post({
					url: 'expertOrder/updateOrder',
					data: params
				}).then(res => {
					console.log('updateOrder res', res);
				})
			},
			pay(orderInfo){
				const {payMap} = orderInfo;
				console.log('支付信息',payMap)
				if(!payMap){
					uni.navigateTo({
						url:"/pagesA/order/act-result?delta=2"
					})
				}
				const {nonceStr,sign,signType,timeStamp} = payMap;
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: timeStamp,
				    nonceStr: nonceStr,
				    package: payMap.package,
				    signType:signType,
				    paySign: sign,
				    success: function (res) {
						uni.navigateTo({
							url:"/pagesA/order/act-result?delta=2"
						})	
				    },
				    fail: function (err) {
				       uni.redirectTo({
				       	url: "/pagesB/my-order/my-order"
				       });
				    }
				});
			},
		},
		onShow() {
		//获取电话咨询 信息
			this.$request.get({
				url: 'mallInfo/selectExpert',
				data: {
					"id": this.linkUserId
				},
			}).then(priceItems => {
				console.log('showByExpertId##', priceItems);
				if (priceItems && priceItems.length !== 0) {
					//获取到 图文咨询
					this.picTxtItems = priceItems;
					this.price = this.picTxtItems[1].price;
					this.typeId = this.picTxtItems[1].typeId;
					
					for(let i=0;i<this.picTxtItems.length;i++)
					{
						if(this.picTxtItems[i].typeId > 2 && this.picTxtItems[i].remarks != '' && this.picTxtItems[i].remarks != null)
						{
							let temDate = this.picTxtItems[i].remarks.split(",");
							for(let j=0;j<temDate.length;j++)
							{
								if(temDate[j] == "9:00-12:00")
								{
									this.dayDataEnbale[0] = true;
									if(j == 0)
									{
										this.selectTimeIndex = 0;
										this.time = this.dayData[0];
									}
								}
								else if(temDate[j] == "12:00-17:00"){
									this.dayDataEnbale[1] = true;
									if(j == 0){
										this.selectTimeIndex = 1;
										this.time = this.dayData[1];
									}
								}
								else if(temDate[j] == "17:00-19:00"){
									this.dayDataEnbale[2] = true;
									if(j == 0){
										this.selectTimeIndex = 2;
										this.time = this.dayData[2];
									}
								}
							}
							break;
						}
					}
				}
			}, res => {});
		},
		onLoad(option) {
			console.log(option.headPortrait)
			this.realName = option.realName;
			this.linkUserId = option.linkUserId;
			this.expertId = option.expertId;
			this.headPortrait = option.headPortrait;
			this.telNumber = uni.getStorageSync('userInfo').phoneNumber
			this.currentMonth = new Date().getMonth()+1;
			this.month = this.currentMonth;
			this.minCurrentMonth = this.currentMonth;
			this.currentMonth=this.Arabia_To_SimplifiedChinese(this.currentMonth);
			this.currentWeek = new Date().getDay();
			this.currentDate = new Date().getDate();
			let monthTotalDay = this.getTotalDate(this.currentMonth);
			for(let i=0;i<7;i++){
				if(this.currentWeek-0+i>7){
					this.monthArray[i].week = this.currentWeek-0+i-7;
				}else{
					this.monthArray[i].week = this.currentWeek-0+i
				}
				this.monthArray[i].week=this.Arabia_To_SimplifiedChinese(this.monthArray[i].week)
				if(this.currentDate-0+i>monthTotalDay){
					this.monthArray[i].date = this.currentDate-0+i-monthTotalDay
				}else{
					this.monthArray[i].date = this.currentDate-0+i
				}
				// this.monthArray[i].date=this.Arabia_To_SimplifiedChinese(this.monthArray[i].date)
			}
			this.setAppointDate(1)
		}
	}
</script>
<style lang="scss" scoped>
	.nochange{
		color: #b8b8b8
	}
	.day-time-list {
		.day-time-item {
			height: 98upx;
			line-height: 98upx;
			text-align: center;
			font-size:32upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(68,68,68,1);
			border: 2upx solid #F2F2F2;
			margin-bottom: 28upx;
			position: relative;
			.active{
				border: 2upx solid #94BEFC;
			}
			.tel-select-con-pic {
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
	.appoint-month-contain-item-date {
		width: 62upx;
		height: 62upx;
		line-height: 62upx;
		text-align: center;
	}
	.time-pop {
		background:rgba(255,255,255,1);
		border-radius:20upx 20upx 0upx 0upx;
		box-sizing: border-box;
		padding: 46upx 40upx 146upx 40upx;
		position: relative;
		margin-bottom: -100upx;
		.delete {
			position: absolute;
			width: 33upx;
			height: 33upx;
			top: 36upx;
			right: 30upx;
		}
		.time-pop-title {
			font-size:48upx;
			font-weight:400;
			color:rgba(68,68,68,1);
			line-height: 66upx;
			margin-bottom: 6upx;
		}
		.time-pop-title-s {
			font-size:26upx;
			font-weight:400;
			color:rgba(136,135,135,1);
			line-height:36upx;
		}
	}
	.warpTips {
		width: 32upx;
		height: 40upx;
		margin-right: 10upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 18upx;
	}
	.tips {
		font-size:30upx;
		font-family:PingFangSC-Semibold,PingFang SC;
		font-weight:600;
		color:rgba(68,68,68,1);
	}
	.consult-tel {
		height: 114upx;
		line-height: 114upx;
		box-sizing: border-box;
		padding: 0 40rpx;
		.consult-tel-warp {
			height: 114upx;
			line-height: 114upx;
			border-bottom: 2upx solid #F9F9F9;
			display: flex;
			view {
				flex: 1;
				height: 114upx;
				line-height: 114upx;
			}
			>view:nth-child(2){
				text-align: right;
				height: 114upx;
				line-height: 114upx;
				box-sizing: border-box;
				padding: 35upx 0;
			}
		}
	}
	.order {
		padding: 0 40upx;
		height: 114upx;
		.order-warp {
			display: flex;
			border-bottom: 2upx solid #F9F9F9;
			height: 114upx;
			>view:nth-child(1){
				width: 120upx;
				font-size:30upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(68,68,68,1);
				height: 114upx;
				line-height: 114upx;
			}
			>view:nth-child(2){
				flex: 1;
				text-align: right;
				align-items: center;
				display: flex;
				justify-content: flex-end;
				.order-t {
					font-size:28upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(163,163,163,1);
					line-height:28upx;
					margin-top: 12upx;
					margin-bottom: 6upx;
				}
				.order-b{
					font-size:28upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(68,68,68,1);
					line-height:28upx;
				}
			}
			>view:nth-child(3){
				width: 20upx;
				height: 114upx;
				line-height: 114upx;
			}
		}
	}
	.tel {
		box-sizing: border-box;
		height: 142upx;
		line-height: 142upx;
		padding: 0 40upx;
		display: flex;
		margin: 40upx 0;
		align-items: flex-start;
		image{
			width: 135upx;
			height: 135upx;
			border-radius: 135upx;
			margin-right: 27upx;
		}
		.tel-warp {
			display: flex;
			height: 142upx;
			line-height: 142upx;
			border-bottom: 2upx solid #F9F9F9;
			.tel-num {
				font-size:30upx;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600;
				color:rgba(68,68,68,1);
				flex: 1;
				text-align: left;
			}
			.tel-name {
				font-size:28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(68,68,68,1);
				height: 142upx;
				line-height: 142upx;
				flex: 1;
				text-align: right;
			}
		}
	}
	.act-warp {
		margin-top: 14upx;
		box-sizing: border-box;
		padding: 0 40upx;
		background-color: #FFFFFF;
		.act-item {
			height: 92upx;
			line-height: 66upx;
			display: flex;
			color: #444444;
			border-bottom: 2upx solid #F9F9F9;
			.act-item-left {
				height: 114upx;
				line-height: 114upx;
				text-align: left;
				flex: 1;
				font-size:30upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(68,68,68,1);
			}
			.act-item-right {
				height: 114upx;
				line-height: 114upx;
				text-align: right;
				flex: 1;
				font-size:28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(163,163,163,1);
			}
		}
	}
	.ord-pay-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 116upx;
		background-color: #FFFFFF;
		padding: 0 30upx;
	}
	.ord-line {
		width: 100%;
		height: 20upx;
		background-color: #F5F5F5;
	}
	.ord-pay-type-left {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.ord-wechat-font {
		font-size: 30upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #444444;
	}
	
	.ord-pay-type-right {
		width: 40upx;
		height: 40upx;
		image {
			width: 40upx;
			height: 40upx; 
		}
	}
	.tel-adver {
		width:686upx;
		height:126upx;
		background:rgba(250,250,250,1);
		// border-radius:24upx;
		box-sizing: border-box;
		margin: 20upx auto 0;
		padding: 28upx;
		.tel-t {
			display: flex;
			margin-bottom: 20upx;
			>view:nth-child(1){
				font-size:28upx;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600;
				color:rgba(178,137,58,1);
				line-height:28upx;
				margin-right: 30upx;
				position: relative;
				&::after {
					content: '';
					display: block;
					width:2upx;
					height:24upx;
					background:rgba(222,206,174,1);
					position: absolute;
					right: -16upx;
					top: 50%;
					transform: translateY(-60%);
				}
			 }
			 >view:nth-child(2){
				 font-size:28upx;
				 font-family:PingFangSC-Semibold,PingFang SC;
				 font-weight:600;
				 color:rgba(178,137,58,1);
				 line-height:28upx;
			 }
		}
		.tel-b {
			display: flex;
			view {
				font-size:22upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(179,140,63,1);
				line-height:22upx;
				margin-right: 34upx;
			}
			view:nth-child(1){
				image {
					width: 26upx;
					height: 22upx;
					vertical-align: middle;
					display: inline-block;
					margin-bottom: 6upx;
					margin-right: 4upx;
				}
			}
			view:nth-child(2){
				image {
					width: 14upx;
					height: 22upx;
					vertical-align: middle;
					display: inline-block;
					margin-bottom: 6upx;
					margin-right: 4upx;
				}
			}
			view:nth-child(3){
				image {
					width: 20upx;
					height: 20upx;
					vertical-align: middle;
					display: inline-block;
					margin-bottom: 6upx;
					margin-right: 4upx;
				}
			}
		}
	}
	.active {
		border:2upx solid rgba(0,139,255,1)!important;
	}
	.tel-consult {
		background-color: #fff;
	}
	.ord-pay-bot {
		box-sizing: border-box;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 12upx 40upx 22upx 40upx;
		border-top: 1rpx solid #F2F2F2;
		box-shadow: 0px -3px 3px 0px rgba(0, 0, 0, 0.02);
	}
	
	.ord-pay-bot-left {
		display: flex;
		align-items: center;
	}
	
	.ord-pay-bot-left-pay {
		width: 142upx;
		font-size: 26upx;
		font-family: ArialMT;
		color: rgba(222, 90, 2, 1);
	}
	
	.ord-pay-bot-left-coupon {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
	}
	
	
	.ord-pay-bot-opt {
		width:270upx;
		height:80upx;
		background:rgba(0,139,255,1);
		border-radius:6upx;
		text-align: center;
		line-height: 80upx;
		font-size:32upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
	}
	.appoint-time-title {
		padding: 42upx 0 36upx 40upx;
		font-size:30upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(68,68,68,1);
	}
	.tel-time-contain {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 17upx 30upx;
		background-color: #FFFFFF;
	}

	.tel-time-contain-time {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
	}

	.tel-time-contain-tip {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(168, 168, 168, 1);
	}

	.tel-re {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(168, 168, 168, 1);
	}

	.tel-serve-con {
		padding: 0 40upx;
		background-color: #FFFFFF;
	}

	.tel-serve-con-item {
		width:670upx;
		height:98upx;
		background:rgba(255,255,255,1);
		border:2upx solid rgba(242,242,242,1);
		margin-bottom: 24upx;
		text-align: center;
		line-height: 98upx;
		.price-icon {
			color: #DE5A02;
			font-size: 28upx;
			font-weight: 600;
			display: inline-block;
			margin-right: 4upx;
		}
		.price-num {
			color: #DE5A02;
			font-size: 42upx;
			font-weight: 600;
			display: inline-block;
			margin-right: 6upx;
		}
		.price-minus {
			font-size: 28upx;
			color: #444444;
		}
	}

	.tel-telphone {
		margin-top: 20upx;
		padding: 22upx 30upx;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.tel-confirm {
		margin: 77upx 30upx 40upx 30upx;
		border-radius: 44upx;
		height: 88upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, rgba(70, 144, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		box-shadow: 0px 4upx 18upx 0px rgba(126, 178, 255, 0.7);
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.tel-tips {
		padding: 48upx 38upx 48upx 38upx;
		background-color: #F5F5F5;
	}

	.tel-tips-font {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #757575;
        line-height:50upx;
	}

	.tel-con-pic {
		width: 20upx;
		height: 20upx;
		margin-right: 15upx;
	}

	.tel-serve-con-item {
		position: relative;
	}

	.tel-select-pic {
		width: 60upx;
		height: 50upx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.tel-select-con-pic {
		width: 60upx;
		height: 50upx;
	}

	.tel-tips-title {
		margin-bottom: 14upx;
	}
    .appoint-month{
    	display: flex;
    	align-items: center;
		margin-top: 42upx;
    }
    .appoint-border{
    	/* height: 1upx; */
    	height: 2upx;
    	border-top: 1upx solid #EBEBEB;
    	width: 259upx;
    }
    .appoint-month-text{
    	font-size:34upx;
    	font-family:PingFangSC-Regular,PingFang SC;
    	font-weight:400;
    	color:rgba(51,51,51,1);
    	margin:0 30upx;
		line-height: 48upx;
    }
    .appoint-month-contain{
    	display: flex;
    	justify-content: space-between;
    	font-size:28upx;
    	margin-top: 18upx;
    	margin-bottom: 48upx;
    	font-family:PingFangSC-Regular,PingFang SC;
    	font-weight:400;
    	color:rgba(85,85,85,1);
    }
    .appoint-month-contain-item{
    	display: flex;
    	flex-direction: column;
    	align-items: center;
		width: 62upx;
    }
    .appoint-active{
    	background:rgba(42,125,250,1);
    	color:rgba(255,255,255,1);
		border-radius: 50%;
		width: 62upx;
		height: 62upx;
    }
    .appoint-time-contain-item{
    	height: 80upx;
    	line-height: 80upx;
    	text-align: center;
    	margin:0 30upx
    }
	.order-pay-bottom {
		background-color: #F5F5F5;
		padding-bottom: 40upx;
		.order-pay-bottom-btn {
			width: 637upx;
			height: 88upx;
			margin: 0 auto;
			background: rgba(25, 109, 236, 1);
			border-radius: 44upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 30upx;
		}
	}
</style>
